<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
      canvas { width: 100%; height: 100%; }
		</style>
	</head>
	<body>
		<script src="../js/three.js"></script>
		<script>
      // 场景
			const scene = new THREE.Scene()
      // 相机
      const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)

      // 创建渲染器实例
      const renderer = new THREE.WebGLRenderer()
      // 设置渲染器尺寸
      renderer.setSize(window.innerWidth, window.innerHeight)
      // 将渲染器的dom 元素添加到 html 文档中
      document.body.appendChild(renderer.domElement)

      // 初始化一个加载器
			const texture = new THREE.TextureLoader().load('/image/text.png')
			texture.wrapS = THREE.RepeatWrapping
			texture.wrapT = THREE.RepeatWrapping
			texture.repeat.set(4, 4)

      // 创建立方体
      // 创建一个立方体对象
      const geometry = new THREE.BoxGeometry(1, 1, 1)
      // 给立方体材质等
      const material = new THREE.MeshBasicMaterial(
        {
          // 使用纹理进行材质创建
          map: texture
        }
      )
      // 添加网格
      const cube = new THREE.Mesh(geometry, material)
      // 将网格放入到场景中
      scene.add(cube)

      camera.position.z = 5

      // 渲染场景（渲染循环）
      function animate() {
        requestAnimationFrame(animate)
        // 使立方体动起来
        cube.rotation.x += 0.01
        cube.rotation.y += 0.01
        renderer.render(scene, camera)
      }
      animate()
		</script>
	</body>
</html>